Advanced Visual Comparison

DevAssure's Advanced Visual Comparison feature allows for precise, controlled visual regression testing by providing customizable options. This enables you to test specific elements on a page, manage visual differences, and handle dynamic content effectively.

Custom Function

To perform advanced visual testing, follow these steps:

In the side navigation menu, select Custom Functions.
Click on Functions > Add New Custom Functions.
Enter a name for your function in Function Name.
Choose Advanced Function and select Visual Testing > Advanced Visual Comparison.

Set Up Advanced Visual Testing Options:

Use the fields provided to customize your visual testing function as per your needs.

Label

Description: Assigns a unique name to the snapshot, helping you identify and manage specific snapshots in reports.
Example Usage: Label the snapshot as "Homesnap".

Element

Description: This field allows you to specify a particular element for visual comparison.
Default: If left blank, visual comparison will be conducted for the entire page.
Example Usage: To compare only the header section of a page, enter the header element which can be passed as an argument to the function and referred inside.

maskLocators

Description: Defines specific elements to mask from the visual snapshot. Masked elements will be hidden with a pink-colored overlay to exclude them from comparison.
Usage: This is useful for dynamic content like ads or pop-ups that can change frequently.
Example Usage: To mask an advertisement section and a sidebar:
```
maskLocators: #ad-banner, #sidebar
```
Example for masked elements with a pink-colored overlay

Timeout

Description: Specifies the time (in milliseconds) to wait for the page to load before taking the snapshot.
Default: 20000 milliseconds (20 seconds)
Example Usage: Set a custom timeout of 15 seconds
```
timeout: 15000
```

fullPage

Description: If set to true, captures the entire scrollable page for the visual comparison.
Default: false
Example Usage: To capture the entire page, use:
```
fullPage: true
```

background

Description: When set to true, removes the background from the visual snapshot, which can be helpful when comparing elements in isolation.
Default: false
Example Usage: To remove the background from snapshots, use:
```
background: true
```

ignoreFailure

Description: If true, any visual comparison failures will be ignored, and the test will continue to run. The comparison results will still be available for review.
Default: false
Example Usage: To continue testing even if a visual discrepancy is detected.
```
ignoreFailure: true
```

Example: Setting Up an Advanced Visual Comparison.

Below is an example details for an advanced visual comparison test:

  label :maincontentsnap

  element: maincontent, // Target only the main content section

  maskLocators: #ad-banner', '.dynamic-content' // Mask ad and dynamic content sections

  timeout: 25000, // Wait for 25 seconds before taking the snapshot

  fullPage: true, // Capture the entire page

  background: false, // Retain background in the snapshot

  ignoreFailure: true // Ignore visual comparison failures

In this example:

The test will capture only the #main-content section, masking out any #ad-banner and .dynamic-content elements. The snapshot is set to wait up to 25 seconds for full loading. It will capture the entire scrollable page and ignore background removal, preserving the original design. Any visual mismatch will be ignored, allowing the test to proceed.

Custom Function​

Custom Function